HomeGames.tsx 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. "use client";
  2. import { Category, GameListRep } from "@/api/home";
  3. import SwiperGroup from "@/components/Card/SwiperGroup";
  4. import { useRouter } from "@/i18n/routing";
  5. interface Props {
  6. groupGames: Category[];
  7. // group: GroupType[];
  8. }
  9. const Manufacturer = (props: { data: GameListRep[]; group: Category }) => {
  10. const router = useRouter();
  11. const { data, group } = props;
  12. const todoHandler = (item: GameListRep) => {
  13. // router.push(`/gameList/?gameListFlag=${item.id}&type=${group.type}`);
  14. router.push({
  15. pathname: `/gameList/?gameListFlag=${item.id}&type=${group.type}`,
  16. });
  17. };
  18. const elements = data.map((item, index) => {
  19. return (
  20. <img
  21. key={index}
  22. className={"rounded-[0.05rem]"}
  23. onClick={() => todoHandler(item)}
  24. src={item.game_icon}
  25. alt=""
  26. />
  27. );
  28. });
  29. return <div className={"grid grid-cols-4 gap-x-2 gap-y-2"}>{elements}</div>;
  30. };
  31. const HomeGames = (props: Props) => {
  32. const router = useRouter();
  33. const { groupGames = [] } = props;
  34. const todoHandler = (item: Category) => {
  35. router.push(`/gameList/?gameListFlag=${item.jump_id}&type=${item.type}`);
  36. };
  37. return (
  38. <>
  39. {groupGames.map((group, index) => {
  40. if (group.type !== 2) {
  41. return (
  42. <SwiperGroup
  43. key={index}
  44. group={group}
  45. col={3}
  46. visibleTodos={true}
  47. todoHandler={todoHandler}
  48. ></SwiperGroup>
  49. );
  50. } else {
  51. // 厂商
  52. return (
  53. <SwiperGroup
  54. key={index}
  55. group={group}
  56. page={4}
  57. visibleTodos={false}
  58. todoHandler={todoHandler}
  59. slideRender={(data) => <Manufacturer data={data} group={group} />}
  60. ></SwiperGroup>
  61. );
  62. }
  63. })}
  64. </>
  65. );
  66. };
  67. export default HomeGames;